<template>
  <a-spin :spinning="loading">
    <div class="modal-header">
      <div class="modal-title">
        {{ modalTitle }}
      </div>
    </div>
    <slot></slot>
    <div class="modal-body">
      <a-form v-loading="saving" class="form-container" :model="form" ref="formRef">
        <a-form-item
          :label="l('NameOfThings')"
          name="displayName"
          :rules="[{ required: true, message: l('ThisFieldIsRequired') }]"
        >
          <a-input v-model:value="form.displayName" :placeholder="l('NameOfThings')" />
        </a-form-item>
      </a-form>
    </div>
    <div class="modal-footer">
      <a-button :disabled="saving" @click="close()" type="button">
        <close-circle-outlined />
        {{ l('Cancel') }}
      </a-button>
      <a-button :loading="saving" :type="'primary'" @click="handleSubmit()">
        <save-outlined />
        {{ l('Save') }}
      </a-button>
      <a-button :loading="saving" :type="'primary'" @click="handleSubmit(false)">
        <save-outlined />
        {{ l('SaveDoesNotExit') }}
      </a-button>
    </div>
  </a-spin>
</template>

<script lang="ts">
  import { defineComponent } from 'vue';
  import { ModalComponentBase } from '/@/shared/component-base';
  import {
    OrganizationUnitServiceProxy,
    CreateOrganizationUnitInput,
    UpdateOrganizationUnitInput,
  } from '/@/shared/service-proxies';
  import { CloseCircleOutlined, SaveOutlined, ShareAltOutlined } from '@ant-design/icons-vue';
  import { AnyCnameRecord } from 'dns';
  export default defineComponent({
    name: 'create-or-edit-organiaztion-unit',
    mixins: [ModalComponentBase],
    components: {
      CloseCircleOutlined,
      SaveOutlined,
      ShareAltOutlined,
    },
    props: {
      pageDataList: {
        type: Array,
        default: [],
        required: true,
      },
    },
    computed: {
      organizationUnit(): any {
        return !!this.pageDataList && this.pageDataList.length > 0 ? this.pageDataList[0] : null;
      },
      modalTitle() {
        return !!this.organizationUnit && !!this.organizationUnit.displayName
          ? this.l('Edit')
          : this.l('Create');
      },
    },
    data() {
      return {
        saving: false,
        // 表单
        formLayout: 'horizontal',
        form: {
          displayName: '',
        },
        _organizationUnitServiceProxy: new OrganizationUnitServiceProxy(this.$apiUrl, this.$api),
        rules: {
          displayName: [],
        },
      };
    },
    mounted() {
      if (!!this.organizationUnit) {
        this.form.displayName = this.organizationUnit.displayName;
      } else {
        this.form.displayName = '';
      }
    },
    methods: {
      /**
       * 提交表单
       */
      handleSubmit(closeFlag = true) {
        (this.$refs.formRef as any).validate().then(() => {
          if (this.organizationUnit?.id) {
            this.updateUnit(this.form, closeFlag);
          } else {
            // 创建
            this.createUnit(this.form, closeFlag);
          }
        });
      },
      /**
       * 创建
       */
      createUnit(parmas: any, closeFlag) {
        let createOrganization: CreateOrganizationUnitInput = new CreateOrganizationUnitInput();
        createOrganization.init(parmas);
        createOrganization.parentId = this.organizationUnit?.parentId;
        this.saving = true;
        this._organizationUnitServiceProxy
          .create(createOrganization)
          .finally(() => {
            this.saving = false;
          })
          .then(() => {
            this.notify.success(this.l('SavedSuccessfully'));
            if (closeFlag) {
              this.success();
            } else {
              this.saveNotClose();
            }
          });
      },
      /**
       * 编辑
       */
      updateUnit(formdata: AnyCnameRecord, closeFlag = true) {
        let uporganizationinput: UpdateOrganizationUnitInput = new UpdateOrganizationUnitInput();
        uporganizationinput.init(this.organizationUnit);
        uporganizationinput.displayName = formdata.displayName;
        this.saving = true;
        this._organizationUnitServiceProxy
          .update(uporganizationinput)
          .finally(() => {
            this.saving = false;
          })
          .then(() => {
            this.notify.success(this.l('SavedSuccessfully'));
            if (closeFlag) {
              this.success();
            } else {
              this.saveNotClose();
            }
          });
      },
    },
  });
</script>

<style lang="less" scoped>
  .form-container {
    padding: 16px;
  }
</style>
